<template>
  <view>
    <view class="addr" v-if="JSON.stringify(address)=='{}'">
      <button type="primary" @click="chooseaddr">请选择收货地址</button>
    </view>
    <view class="addrdetial" v-else>
      <!-- 上边 -->
    <view class="addr-top">
      <!-- 左边 -->
      <view>
        <text>收货人：</text>
        <text>{{address.userName}}</text>
      </view>
      <!-- 右边 -->
      <view>
        <text>电话：</text>
        <text>{{address.telNumber}}</text>
        <uni-icons type="right"></uni-icons>
      </view>
    </view>
    <!-- 下边 -->
    <view class="addr-bottom">
      <text>收货地址：</text>
      <text>{{getaddrdetial}}</text>
    </view>
    </view>
    <image src="/static/cart_border@2x.png" class="addrBborder"></image>
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
  export default {
    name:"my_addr",
    data() {
      return {
        addrList:{}
      };
    },
    computed:{
      ...mapState('myUser',['address']),
      ...mapGetters('myUser',['getaddrdetial'])
  
    },
    methods:{
      ...mapMutations('myUser',['getAddr']),
    async  chooseaddr(){
      const result= await uni.chooseAddress() 
      if(result[1].errMsg== "chooseAddress:ok"){
       // this. addrList=result[1]
       //  console.log(this. addrList)
        this.getAddr(result[1])
      }
     
      }
    }
  }
</script>

<style lang="scss">
.addr{
 
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 90px;
  button{
    font-size: 13px;
     width: 200px;
  }
}
.addrdetial{
  font-size: 13px;
  padding: 10px;
   height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .addr-top{
    display: flex;
    justify-content: space-between;
  }
  .addr-bottom{
    
  }
 
}
 .addrBborder{
    width: 100%;
    height: 3px;
  }
</style>
